<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>党务管理</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="css/silver/pace-theme-loading-bar.css">
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link rel="stylesheet" href="./css/animate.min.css">
  <link rel="stylesheet" href="./css/md-common.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div style="opacity: 0" class="swiper-container pages-box">
  <section class="u-arrow-bottom">
    <div class="pre-wrap-bottom">
    </div>
  </section>
  <div id="audio_btn" class="off" style="display: block;">
    <div id="yinfu"></div>
    <audio loop="" src="./resource/guangli.mp3" id="media" autoplay="autoplay" preload=""></audio>
  </div>
  <div class="swiper-wrapper">
    <!--div.swiper-slide.page$*11>{$}-->
    <div class="swiper-slide page1">
      <div class="top-box">
        <div class="top-center">
          <img class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
               swiper-animate-delay=".2s" style="width: 4.76rem" src="./images/1-hongqi.png" alt="">
          <!--<img class="title ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"-->
          <!--swiper-animate-delay=".6s" style="width: 4.11rem" src="./images/1-title.png" alt="">-->
          <!--<img class="search ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"-->
          <!--swiper-animate-delay=".6s" style="width: 3.93rem" src="./images/1-search.png" alt="">-->
          <!--<img class="article ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"-->
          <!--swiper-animate-delay=".6s" style="width: 4.08rem" src="./images/1-article.png" alt="">-->
        </div>
        <img class="yuan-bg ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay=".1s" style="width: 5.93rem" src="./images/1-yuan-bg.png" alt="">
        <img class="tishi tishi_1 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="1.8s" style="width:2.45rem" src="./images/1-01.png" alt="">
        <img class="tishi tishi_2 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="1.8s" style="width:2.45rem" style="width:1.96rem" src="./images/1-02.png" alt="">
        <img class="tishi tishi_3 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="1.8s" style="width:2.45rem" style="width:2.12rem" src="./images/1-03.png" alt="">
        <img class="tishi tishi_4 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="1.8s" style="width:2.45rem" style="width:2.11rem" src="./images/1-04.png" alt="">
        <img class="tishi tishi_5 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="1.8s" style="width:2.45rem" style="width:2.04rem" src="./images/1-05.png" alt="">
        <img class="tishi tishi_6 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="1.8s" style="width:2.45rem" style="width:2.54rem" src="./images/1-06.png" alt="">
      </div>
      <div class="bottombox">
        <div class="text-box">
          <p class="title ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="2s"
             swiper-animate-delay=".6s">20+功能</p>
          <p class="desc ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="2s"
             swiper-animate-delay="1s"> 开启智慧党务管理<span>新时代</span></p>
        </div>
        <div class="bottomBtn ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="2s"
             swiper-animate-delay="1.3s">观看MG动画演示 >
        </div>
      </div>
    </div>
    <div class="swiper-slide page2">
      <div class="topbox ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">
        <p class="top-title ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">三大亮点</p>
        <p class="top-desc ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">让党务管理工作“活”起来</p>
        <div class="line-white ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s"></div>
      </div>
      <div class="page2-list-box">
        <div class="item ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s">
          <img class="dian " style="width: 1.91rem" src="./images/2-item-bg-dian.png" alt="">
          <img class="bgimg" style="width: 2.68rem" src="./images/2-list-icon-1-bg.png" alt="">
          <img class="icon" style="width: 1.20rem" src="./images/2-list-icon-1.png" alt="">
          <div class="text-box">
            <p class="title">互联互通</p>
            <p class="desc">全方位、全节点系统化管理</p>
          </div>
        </div>
        <div class="item ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.5s">
          <img class="dian" style="width: 1.91rem" src="./images/2-item-bg-dian.png" alt="">
          <img class="bgimg" style="width: 2.82rem" src="./images/2-list-icon-2-bg.png" alt="">
          <img class="icon" style="width: 1.14rem" src="./images/2-list-icon-2.png" alt="">
          <div class="text-box">
            <p class="title">互联互通</p>
            <p class="desc">对基层党建动态科学跟踪<br>方便领导工作监督和掌控</p>
          </div>
        </div>
        <div class="item ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.7s">
          <img class="dian" style="width: 1.91rem" src="./images/2-item-bg-dian.png" alt="">
          <img class="bgimg" style="width: 2.69rem" src="./images/2-list-icon-3-bg.png" alt="">
          <img class="icon" style="width: 1.43rem" src="./images/2-list-icon-3.png" alt="">
          <div class="text-box">
            <p class="title">互联互通</p>
            <p class="desc">党务智能机器人全天在线服务党员 <br> 提高党务工作效率</p>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide page3">
      <div class="topbox">
        <p class="top-title ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">党务管理</p>
        <p class="top-desc ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="0.4s">解决两大难题</p>
        <div class="line-red ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="1s"></div>
        <img class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 4.60rem;" src="./images/3-top-bg-house.png" alt="">
      </div>
      <div class="list-box">
        <div class="item ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s">
          <div class="top-title-bg-box flex-row ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
               swiper-animate-delay="0.3s">
            <div class="img-arrow"><img style="width: .27rem" src="./images/3-arrow-right.png" alt=""></div>
            <div class="top-text">解决党务工作人力资源少 <br> 党建任务重的问题</div>
          </div>
          <div class="flex-row bottom-desc-box ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
               swiper-animate-delay="0.3s">
            <div class="flex-grow-0 yuan-dian-box">
              <div class="yuan-dian"></div>
            </div>
            <div class="flex-grow-1">对基层党建动态科学跟踪<br>方便上级单位进行工作监督与指导</div>
          </div>
        </div>
        <div class="item item2 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s">
          <div class="top-title-bg-box2 flex-row ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
               swiper-animate-delay="0.3s">
            <div class="img-arrow"><img style="width: .27rem" src="./images/3-arrow-right.png" alt=""></div>
            <div class="top-text">解决党务工作人力资源少 <br> 党建任务重的问题</div>
          </div>
          <div class="flex-row bottom-desc-box ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
               swiper-animate-delay="0.3s">
            <div class="flex-grow-0 yuan-dian-box ">
              <div class="yuan-dian"></div>
            </div>
            <div class="flex-grow-1">对基层党建动态科学跟踪<br>方便上级单位进行工作监督与指导</div>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide page4">
      <div class="topbox ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">
        <p class="top-title ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">党务管理</p>
        <p class="top-desc ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">赋予三大现实意义</p>
        <div class="line-white ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s"></div>
      </div>
      <img class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s" style="width: 2.99rem;position: absolute;top:4.58rem;right: 0"
           src="./images/4-center-bg.png" alt="">
      <div class="swiper-container scroll-box">
        <div class="swiper-wrapper">
          <div class="swiper-slide ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
               swiper-animate-delay="0.3s">
            <div class="scroll">
              <div class="imgbox">
                <img class="scroll-left-img" style="width: 3.34rem" src="./images/4-scroll-left-img-1.png" alt="">
              </div>
              <p class="title">辅助科学化党委决策</p>
              <p class="desc">提供数据统计分析功能</p>
            </div>
          </div>
          <div class="swiper-slide ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
               swiper-animate-delay="0.3s">
            <div class="scroll">
              <div class="imgbox">
                <img class="img-center-1" style="width: 3.72rem" src="./images/4-scroll-center-img-1.png" alt="">
                <img class="img-center-2" style="width: 3.32rem" src="./images/4-scroll-center-img-2.png" alt="">
              </div>
              <p class="title">提供一站式党员服务</p>
              <p class="desc">缴纳党费，查看组织动态</p>
              <p class="desc">参加组织活动</p>
            </div>
          </div>
          <div class="swiper-slide ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
               swiper-animate-delay="0.3s">
            <div class="scroll">
              <div class="imgbox">
                <img class="scroll-right-img" style="width: 3.52rem" src="./images/4-scroll-right-img-1.png" alt="">
              </div>
              <p class="title">提供便捷式党务管理</p>
              <p class="desc">在线办理党员组织关系转接 </p>
              <p class="desc">流动党员管理、党费管理</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide page5">
      <div class="top-box">
        <img class="center-img ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 5.34rem" src="./images/5-center-img.png" alt="">
        <img class="yun ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 6.27rem" src="./images/6-yun.png" alt="">
      </div>
      <div class="text-box">
        <p class="title ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="2s"
           swiper-animate-delay="0.5s">机遇 挑战 责任 创新</p>
        <div class="line-red ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="1s"></div>
        <p class="desc ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
           swiper-animate-delay="0.5s">创新性将互联网技术与党务管理工作密切融合</p>
        <p class="desc ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
           swiper-animate-delay="0.5s">打破时间与空间的限制</p>
        <p class="desc ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
           swiper-animate-delay="0.5s">扩展党务管理工作新形式</p>
        <p class="desc ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
           swiper-animate-delay="0.5s">推动党务管理工作向信息化转变</p>
      </div>
    </div>
    <div class="swiper-slide page6">
      <div class="top-box ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">
        <p class="title ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">联系试用</p>
        <p class="desc ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">七一云党建管理平台</p>
      </div>
      <form class="page11-content ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
            swiper-animate-delay="0.3s">
        <div class="item ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s">
          <div class="flex-row flex-y-center"><img style="width: .39rem" src="./images/11-icon1.png" alt="">单位名称</div>
          <input type="text" placeholder="请输入您所在的单位名称">
        </div>
        <div class="item ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.5s">
          <div class="flex-row flex-y-center"><img style="width: .37rem" src="./images/11-icon2.png" alt="">党员人数</div>
          <input type="text" placeholder="请输入您所在单位的党员人数">
        </div>
        <div class="item ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.7s">
          <div class="flex-row flex-y-center"><img style="width: .38rem" src="./images/11-icon3.png" alt="">联系人</div>
          <input type="text" placeholder="请输入您的姓名">
        </div>
        <div class="item ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.9s">
          <div class="flex-row flex-y-center"><img style="width: .33rem" src="./images/11-icon4.png" alt="">联系方式</div>
          <input type="text" placeholder="请输入您的联系电话">
        </div>
        <button class="ani unse" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
                swiper-animate-delay="1.4s" type="submit">确认提交
        </button>
      </form>
    </div>
  </div>
</div>
<script src="./js/rem.js"></script>
<script src="./js/pace.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/swiper.min.js"></script>
<script src="./js/swiper.animate.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>

  window.onload = function () {
    // document.getElementsByClassName('spinner')[0].style.display = 'none';
    //document.getElementsByClassName('pages-box')[0].style.display = 'block';
    var mySwiper = new Swiper('.pages-box', {
      direction: 'vertical', // 垂直切换选项
      loop: false, // 循环模式选项
      on: {
        init: function () {
          swiperAnimateCache(this); //隐藏动画元素
          swiperAnimate(this); //初始化完成开始动画
        },
        slideChangeTransitionEnd: function () {
          swiperAnimate(this); //每个slide切换结束时也运行当前slide动画

          if (this.activeIndex !== 7) {
            $('.u-arrow-bottom').show();
          } else {
            $('.u-arrow-bottom').hide();
          }

          //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
        }
      },
    });
    var myswiper2 = new Swiper(".scroll-box", {
      direction: 'horizontal',
      loop: false,
      freeMode: true,
      slidesPerView: "auto",
      initialSlide: 1,//默认第二个
      centeredSlides: true,//居中
    })
    Pace.on('hide', function () {
      $('.pages-box').css({opacity: 1})
    });
    $(document).ready(function () {
      var audio = document.getElementById('media');
      audio.play();
      if (audio.paused) {
        $('#audio_btn').removeClass('rotate')
      } else {
        $('#audio_btn').addClass('rotate')
      }
      document.addEventListener('WeixinJSBridgeReady', function () {
        audio.play();
        $('#audio_btn').addClass('rotate')
      }, false)
      $('#audio_btn').click(function () {
        if (audio.paused) {
          audio.play();
          $(this).addClass('rotate')
        } else {
          audio.pause();// 暂停
          $(this).removeClass('rotate')
        }

      })
    });
  };
</script>
<script>
  $(function () {
    $("button[type='submit']").click(function (e) {
      e.preventDefault();
      console.log(1111);
    })
  })
</script>
<script>
  $(function () {
    var url = encodeURIComponent(window.location.href);
    var reulut;

    $.post('https://www.cloudcpc.com/share.php',
        {"url": url},
        function (result) {
          reulut = result;
          console.log(result)
          wx.config({
            debug: false,
            appId: reulut.appId, // 必填，公众号的唯一标识
            timestamp: reulut.timestamp, // 必填，生成签名的时间戳
            nonceStr: reulut.nonceStr, // 必填，生成签名的随机串
            signature: reulut.signature,// 必填，签名
            jsApiList: [ // 必填，需要使用的JS接口列表
              'onMenuShareAppMessage', //1.0 分享到朋友
              'onMenuShareTimeline', //1.0分享到朋友圈
              'updateAppMessageShareData', //1.4 分享到朋友
              'updateTimelineShareData' //1.4分享到朋友圈
            ]
          });

          wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
            wx.updateAppMessageShareData({
              title: '七一云党建“党务管理”平台', // 分享标题
              desc: '七一云党建，互联网+智慧党建新阵地', // 分享描述
              link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'https://www.cloudcpc.com/h5/dj-dangwuguangli/images/dj_danwuguanli.png', // 分享图标
            });

            wx.updateTimelineShareData({
              title: '七一云党建“党务管理”平台', // 分享标题
              desc: '七一云党建，互联网+智慧党建新阵地', // 分享描述
              link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'https://www.cloudcpc.com/h5/dj-dangwuguangli/images/dj_danwuguanli.png', // 分享图标
            });
          });

        }
    );
  })
</script>
</body>
</html>